<%--
  Created by IntelliJ IDEA.
  User: dhd
  Date: 2024/6/6
  Time: 9:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>存储空间列表</title>
    <script src="${pageContext.request.contextPath}/js/jquery-1.11.3.js"></script>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th{
            background-color: dodgerblue;
        }

        tbody>tr:hover {
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
<h1>存储空间列表</h1>
<input type="button" value="创建存储空间" id="add">
<table>
    <thead>
    <tr>
        <th>存储空间名称</th>
        <th>存储类型</th>
        <th>容量</th>
        <th>流量</th>
        <th>当月访问次数</th>
        <th>访问权限管理</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
</body>
</html>

<script>
    //查询数据
    $.ajax({
        url: '${pageContext.request.contextPath}/Oss.action',
        type: 'get',
        data: {opr: 'list'},
        dataType: 'json',
        success: ccSpaceList,
        error: function () {
            alert('查询失败！');
        }
    })

    function ccSpaceList(data) {
        console.log(data);
        $('tbody').empty();
        data.forEach(dd => {

            let p = dd.permission;
            let rwCheck = '';
            let rCheck = '';
            let PriCheck = '';
            if(p=='RW'){
                rwCheck = 'checked';
            }if(p=='R'){
                rCheck = 'checked';
            }if(p=='Pri'){
                PriCheck = 'checked';
            }
            let tr = `<tr>
                <td>` + dd.bucketName + `</td>
                <td>` + dd.type + `</td>
                <td>` + dd.capacity + `</td>
                <td>` + dd.flow + `</td>
                <td>` + dd.visits + `</td>
                <td>
                    <input type="radio" name="permission-`+dd.id+`" value="RW" `+rwCheck+`  onclick="changeval(`+dd.id+`,'RW')">RW
                    <input type="radio" name="permission-`+dd.id+`" value="R"  `+rCheck+` onclick="changeval(`+dd.id+`,'R')">R
                    <input type="radio" name="permission-`+dd.id+`" value="Pri"  `+PriCheck+` onclick="changeval(`+dd.id+`,'Pri')">Pri
                </td>
            </tr>`
            $('tbody').append(tr);
        })
    }


    //点击创建按钮  跳转到新增页面
    $('#add').click(function () {
        window.location.href = "createSpace.jsp";
    })

    function changeval(id,permission) {
        let opr = "update";
        let params = {opr,id,permission}
        $.ajax({
            url: '${pageContext.request.contextPath}/Oss.action',
            type: 'post',
            data: params,
            dataType: 'json',
            success:function (data) {
                console.log(data);
                if (data==true){
                    alert('更新成功！')
                    window.location.reload();
                }else {
                    alert('更新失败！')
                    window.location.reload();
                }
            },
            error:function () {
                alert('修改失败！')
            }
        })
    }

</script>
